<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const menu = ref([
  {
    name: '内存分配',
    path: '/memory_manager'
  },
  {
    name: '磁盘管理',
    path: '/disk_manager'
  }
])

const navigateTo = (path) => {
  router.push(path)
}
</script>

<template>
  <div class="layout-container">
    <div class="radio-inputs">
      <label v-for="item in menu" :key="item.path" class="radio">
        <input
          type="radio"
          name="radio"
          :checked="item.path === $route.path"
          @change="navigateTo(item.path)"
        />
        <span class="name">{{ item.name }}</span>
      </label>
    </div>
    <router-view></router-view>
  </div>
</template>

<style lang="scss" scoped>
.radio-inputs {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  border-radius: 0.5rem;
  background-color: #eee;
  box-sizing: border-box;
  box-shadow: 0 0 0px 1px rgba(0, 0, 0, 0.06);
  padding: 0.25rem;
  width: 300px;
  font-size: 14px;

  margin-top: 2rem;
  margin-left: 14rem;
}

.radio-inputs .radio {
  flex: 1 1 auto;
  text-align: center;
}

.radio-inputs .radio input {
  display: none;
}

.radio-inputs .radio .name {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  border: none;
  padding: 0.5rem 0;
  color: rgba(51, 65, 85, 1);
  transition: all 0.15s ease-in-out;
}

.radio-inputs .radio input:checked + .name {
  background-color: #fff;
  font-weight: 600;
}
</style>
